"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { usePathname } from "next/navigation";

export function Navbar() {
  const pathname = usePathname();

  return (
    <header className="border-b">
      <div className="container flex items-center justify-between h-16 px-4">
        <div className="flex items-center space-x-6">
          <Link href="/" className="text-xl font-bold">
            SuperAssets
          </Link>
          <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
            <Link
              href="/"
              className={pathname === "/" ? "text-foreground transition-colors" : "text-foreground/60 hover:text-foreground transition-colors"}
            >
              Dashboard
            </Link>
            <Link
              href="/assets"
              className={pathname === "/assets" ? "text-foreground transition-colors" : "text-foreground/60 hover:text-foreground transition-colors"}
            >
              Assets
            </Link>
            <Link
              href="/hosts"
              className={pathname === "/hosts" ? "text-foreground transition-colors" : "text-foreground/60 hover:text-foreground transition-colors"}
            >
              Hosts
            </Link>
          </nav>
        </div>
      </div>
    </header>
  );
}